<template>
  <div class="regionTable">
    <div class="tools">
      <Search @clearSearch="pageRefresh" :placeholder="placeholder"></Search>
      <el-button type="primary" class="add_btn" @click="addPrivate"
        >添加私人车位</el-button
      >
    </div>
    <router-view :regionData="regionData"></router-view>
    <div class="table">
      <el-table
        row-key="reg_id"
        :data="regionData.slice((lazyPage - 1) * pageSize, lazyPage * pageSize)"
        stripe
        style="margin: 0 auto; width: 100%; font-size: 1rem"
        @expand-change="expandChange"
        @filter-change="filterChange"
      >
        <el-table-column type="expand">
          <template slot-scope="props" v-if="spaceData[0] !== null">
            <el-table
              :data="spaceData"
              v-loading="props.row.loading"
              border
              class="expandTable"
            >
              <el-table-column prop="space_no" label="编号"> </el-table-column>
              <el-table-column prop="car_plate" label="车牌号码">
              </el-table-column>
              <el-table-column prop="space_private" label="私有停车位">
                <template slot-scope="scope">
                  <span v-if="scope.row.space_private"
                    ><i class="el-icon-circle-check" style="color: #67c23a"></i
                  ></span>
                  <span v-else
                    ><i class="el-icon-circle-close" style="color: #f56c6c"></i
                  ></span>
                </template>
              </el-table-column>

              <el-table-column prop="space_charge_type" label="充电车位">
                <template slot-scope="scope">
                  <span v-if="scope.row.space_charge_type"
                    ><i class="el-icon-circle-check" style="color: #67c23a"></i
                  ></span>
                  <span v-else
                    ><i class="el-icon-circle-close" style="color: #f56c6c"></i
                  ></span>
                </template>
              </el-table-column>
              <el-table-column prop="space_status" label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.space_status"
                    ><i class="el-icon-circle-check" style="color: #67c23a"></i
                  ></span>
                  <span v-else
                    ><i class="el-icon-circle-close" style="color: #f56c6c"></i
                  ></span>
                </template>
              </el-table-column>
              <el-table-column prop="billing_start" label="开始计费时间">
              </el-table-column>
              <el-table-column prop="remarks" label="备注">
                <template slot-scope="scope">
                  <span>{{ arr(scope.row.remarks) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="reg_id" label="ID" width="80" min-width="80">
        </el-table-column>
        <el-table-column
          prop="reg_name"
          label="区域名称"
          width="140"
          min-width="140"
        >
        </el-table-column>
        <el-table-column
          prop="company_name"
          label="公司名称"
          width="240"
          min-width="240"
        >
        </el-table-column>

        <el-table-column
          prop="reg_type"
          label="区域类型"
          width="120"
          min-width="120"
          :filters="[
            { text: '普通', value: '普通' },
            { text: '单位', value: '单位' },
          ]"
          :filter-multiple="false"
          filter-placement="bottom-end"
          :column-key="'type'"
        >
        </el-table-column>

        <el-table-column
          prop="reg_space_count"
          label="停车位数量"
          width="160"
          min-width="160"
        >
        </el-table-column>
        <el-table-column
          prop="reg_space_recount"
          label="停车位剩余数量"
          width="160"
          min-width="160"
        >
        </el-table-column>
        <el-table-column
          prop="reg_remarks"
          label="备注"
          width="180"
          min-width="180"
        >
          <template slot-scope="scope">
            <span>{{ arr(scope.row.reg_remarks) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180" min-width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="Edit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="Delete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { PageHeight } from "../utils/PageHeight";
import Search from "../components/Search.vue";
import Qs from "qs";
export default {
  name: "RegionTable",
  components: {
    Search,
  },
  data() {
    return {
      placeholder: "请输入区域名称",
      pageSize: 3,
      regionData: [
        {
          reg_id: 1,
          org_id: null,
          company_name: "",
          reg_name: "",
          reg_type: "",
          reg_space_count: 0,
          reg_space_recount: 0,
          reg_remarks: null,
        },
      ],
      spaceData: [
        {
          space_id: 1,
          space_no: 1,
          car_plate: "云A555TX",
          space_private: true,
          space_charge_type: true,
          space_status: true,
          billing_start: "2021-10-25 10:10:33",
          remarks: null,
        },
      ],
      currentPage_old: 1,
      currentPage: 1,
      total: 0,
    };
  },

  mounted() {
    const height = window.innerHeight;
    this.pageSize = PageHeight(height);
    this.getRegionList();
  },
  methods: {
    //获取区域列表
    getRegionList() {
      this.axios
        .get("/region/regionList", {
          params: {
            page: 1,
            count: this.pageSize * 3,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.regionData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取停车记录列表失败");
        });
    },
    //刷新页面
    pageRefresh() {
      this.$emit("refresh");
    },
    expandChange(row, expandedRows) {
      this.spaceData = [];
      if (!row.children) {
        this.$set(row, "loading", true);
        const regionId = row.reg_id.toString();
        this.axios
          .get("/region/spaceByRegion", {
            params: {
              regionId: regionId,
            },
          })
          .then((res) => {
            if (res.data.data.list[0] === null) {
              this.$message({
                message: "该区域下没有停车位",
                type: "warning",
              });
            } else {
              this.spaceData = res.data.data.list;
              this.$set(row, "loading", false);
            }
          })
          .catch((err) => {
            console.error(err);
            this.$message.error("获取该区域下的停车位失败");
            // this.$set(row, "loading", false);
          });
      }
    },
    //添加
    addPrivate() {
      this.$store.commit("maskStatus_change", true);
      this.$router.push("/region/add");
    },
    //编辑
    Edit(index, row) {
      this.$store.commit("maskStatus_change", true);
      this.$router.push("/region/edit/id=" + row.reg_id);
    },
    //删除行
    Delete(index, row) {
      this.$confirm("此操作将删除该区域信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const regionId = row.reg_id;
          this.axios
            .post(
              "/region/deleteRegion",
              Qs.stringify({
                regionId,
              })
            )
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.pageRefresh();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("删除区域失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //搜索
    searchRegion(val) {
      this.axios
        .get("/region/searchRegion", {
          params: {
            regionName: val,
          },
        })
        .then((res) => {
          this.regionData = res.data.data.list;
        })
        .catch((err) => {
          this.$message.error("搜索区域失败");
          console.error(err);
        });
    },
    //条件筛选出入类型
    filterChange(filters) {
      const regionName = this.$route.query.search;
      const regionType = filters.type[0];
      if (regionName != undefined) {
        if (filters.type) {
          this.axios
            .get("/region/searchRegion", {
              params: {
                regionName,
                regionType,
              },
            })
            .then((res) => {
              this.regionData = res.data.data.list;
            })
            .catch((err) => {
              this.$message.error("筛选区域失败");
              console.error(err);
            });
        }
      } else {
        this.axios
          .get("/region/searchRegion", {
            params: {
              regionType,
            },
          })
          .then((res) => {
            this.regionData = res.data.data.list;
          })
          .catch((err) => {
            this.$message.error("筛选区域失败");
            console.error(err);
          });
      }
    },
    //分页函数
    handleCurrentChange(val) {
      this.currentPage = val;
      if (Math.ceil(this.currentPage_old / 3) !== Math.ceil(val / 3)) {
        this.currentPage_old = val;
        this.pageLoad("/region/regionList", val, 3, this.pageSize * 3)
          .then((res) => {
            this.regionData = res.data.data.list;
          })
          .catch((err) => {
            console.error(err);
            this.$message.error(`获取停车记录列表-第${val}页失败`);
          });
      }
    },
  },
  computed: {
    arr: function () {
      return function (text) {
        if (text === null) {
          return "无";
        } else if (text.length > 5) {
          return text.slice(0, 5) + "...";
        } else {
          return text;
        }
      };
    },
    lazyPage: function () {
      if (this.currentPage < 4) {
        return this.currentPage;
      } else {
        return this.currentPage % 3 === 0 ? 3 : this.currentPage % 3;
      }
    },
  },
  watch: {
    $route: {
      handler(val) {
        const regionName = val.query.search;
        if (regionName !== undefined) {
          this.searchRegion(regionName);
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.tools {
  position: relative;
  width: 100%;
  height: 40px;
}
.add_btn {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translate(0%, -50%);
}
.table {
  margin: 15px auto;
  width: 100%;
  height: 65vh;
  overflow: auto;
}
.pagination {
  float: right;
  width: 50%;
  height: 5vh;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  height: 8px;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #83b7eb;
  border-radius: 5px;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track-piece {
  background-color: #e6e6e6;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #2979c9;
}

.table /deep/ .el-table__fixed,
.table /deep/ .el-table__fixed-right {
  height: calc(100% - 7px) !important;
  box-shadow: -5px -2px 10px rgba(0, 0, 0, 0.12) !important;
}
.table /deep/ .el-table__fixed-body-wrapper {
  height: calc(100% - 36px) !important;
}

.table
  /deep/
  .el-table__body-wrapper.is-scrolling-none
  ~ .el-table__fixed-right {
  height: 100% !important;
  bottom: 0 !important;
  box-shadow: none !important;
}

.table /deep/ .el-table--scrollable-y .el-table__fixed-right {
  bottom: 7px !important;
}
.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
  bottom: 0 !important;
}

.table /deep/.el-table th > .cell {
  text-align: center;
}

.table /deep/.el-table .cell {
  text-align: center;
}
.table /deep/ .row-expand-cover .el-table__expand-icon {
  visibility: hidden;
}
.table /deep/ .el-tag {
  font-size: 1rem;
}
.expandTable {
  margin: 0 auto;
}
</style>